import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import { Tabs } from '@nutui/nutui-react-taro'
import { getCurrentInstance } from '@tarojs/taro'
import AppHeader from '../../../components/app-header/AppHeader'
import BasicInformation from '../../../components/BasicInformation/BasicInformation'
import HealthInformation from '../../../components/HealthInformation/HealthInformation'
import './CattleDetail.scss'

export default function CattleDetail() {

    const eventChannel = getCurrentInstance().page.getOpenerEventChannel();
    // 选项卡切换
    const [tabValue, setTabValue] = useState('0')
    // 牛只的id
    const [infoId, setInfoId] = useState('')

    // 牛的耳标信息
    const [earDetail,setEarDetail]=useState({})
    const changeEar = (data)=>{
        setEarDetail(data)
    }

    useEffect(() => {
        eventChannel.on('selectInfo', (data) => {
            // 在这里处理接收到的数据
            setInfoId(data.id)
        });
    }, [])

    return (
        <View className='cattle-detail'>
            <AppHeader title='溯源记录' top='true'></AppHeader>
            <View className='content'>
                <Tabs
                    className='cattle-tabs'
                    value={tabValue}
                    autoHeight
                    tabStyle={{ position: 'sticky', top: 0, zIndex: 11 }}
                    onChange={(value) => {
                        setTabValue(value)
                    }}
                >
                    <Tabs.TabPane title="基本信息">
                        <BasicInformation listInfo={infoId} fn={changeEar}></BasicInformation>
                    </Tabs.TabPane>
                    <Tabs.TabPane title="健康信息">
                        <HealthInformation listInfoId={infoId} earInfo={earDetail}></HealthInformation>
                    </Tabs.TabPane>
                    <Tabs.TabPane title="检疫信息"> Tab 1 </Tabs.TabPane>
                    <Tabs.TabPane title="疫苗信息"> Tab 1 </Tabs.TabPane>
                    <Tabs.TabPane title="配种信息"> Tab 1 </Tabs.TabPane>
                    <Tabs.TabPane title="繁殖信息"> Tab 1 </Tabs.TabPane>
                </Tabs>

            </View>

        </View>
    )
}
